API Screen Wake Lock : Empêcher la mise en veille de l'écran dans les applications Web

L'API Screen Wake Lock est une API web qui permet aux applications web d'empêcher les appareils de baisser la luminosité ou de verrouiller l'écran. Ceci est particulièrement utile pour les applications où une visibilité continue de l'écran est essentielle, comme les lecteurs multimédias, les applications de navigation et les applications qui nécessitent une interaction de l'utilisateur pendant de longues périodes.

Pourquoi le Screen Wake Lock est-il important ?

Dans le monde d'aujourd'hui, les utilisateurs s'attendent à des expériences fluides. Un appareil qui baisse automatiquement la luminosité ou verrouille l'écran peut perturber ces expériences, surtout lorsque les utilisateurs sont activement engagés avec une application web. Considérez ces scénarios :

• Lecture vidéo : Imaginez que vous regardez un film ou suivez un tutoriel de cuisine, et que l'écran baisse constamment de luminosité, vous forçant à toucher l'écran pour le maintenir allumé. C'est une expérience frustrante.
• Applications de navigation : En conduisant et en utilisant une application de navigation, l'écran doit rester allumé pour fournir des instructions en continu. Un écran qui s'assombrit ou se verrouille pourrait entraîner des virages manqués et des risques potentiels pour la sécurité.
• Applications de présentation : Présenter des diapositives ou afficher des informations importantes nécessite que l'écran reste actif tout au long de la présentation.
• Applications de jeu : De nombreux jeux nécessitent une visibilité ininterrompue de l'écran pour le gameplay. La mise en veille de l'écran peut perturber l'expérience de jeu.
• Tableaux blancs en ligne : Travailler en collaboration sur un tableau blanc en ligne exige que l'écran reste allumé afin que les utilisateurs n'aient pas à le toucher à plusieurs reprises pour se réengager.

L'API Screen Wake Lock offre une solution à ces problèmes, permettant aux applications web de contrôler l'état d'allumage/extinction de l'écran et de fournir une expérience plus fluide et conviviale.

Support des navigateurs

À la fin de 2024, l'API Screen Wake Lock bénéficie d'un solide support sur les principaux navigateurs. Cependant, il est toujours crucial de vérifier les dernières informations de compatibilité des navigateurs sur des ressources comme Mozilla Developer Network (MDN) et Can I use pour assurer une compatibilité inter-navigateurs optimale. Le support peut varier en fonction de la version du navigateur et du système d'exploitation.

Utilisation de l'API Screen Wake Lock

L'API Screen Wake Lock est relativement simple à utiliser. Voici une description des étapes clés :

1. Vérifier le support de l'API

Avant d'essayer d'utiliser l'API, il est essentiel de vérifier si le navigateur de l'utilisateur la prend en charge. Cela évite les erreurs dans les navigateurs qui n'implémentent pas l'API.

            if ('wakeLock' in navigator) {
  // API Screen Wake Lock supportée
} else {
  // API Screen Wake Lock non supportée
  console.log('L\'API Screen Wake Lock n\'est pas supportée par ce navigateur.');
}

            

              
                Copy
              
            
          

2. Demander un verrou de veille

Pour demander un verrou de veille, utilisez la méthode navigator.wakeLock.request(). Cette méthode retourne une Promesse qui se résout avec un objet WakeLockSentinel si la demande réussit. L'objet WakeLockSentinel représente le verrou de veille actif.

            let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Verrou de veille de l\'écran actif !');

    wakeLock.addEventListener('release', () => {
      console.log('Le Screen Wake Lock a été libéré');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Appelez cette fonction pour activer le verrou de veille
requestWakeLock();

            

              
                Copy
              
            
          

Dans cet exemple, la fonction requestWakeLock() tente d'acquérir un verrou de veille de l'écran. L'argument 'screen' spécifie que nous voulons empêcher l'écran de baisser de luminosité ou de se verrouiller. Si la demande réussit, un message est enregistré dans la console. Le code inclut également un gestionnaire d'erreurs pour intercepter toute exception qui pourrait survenir lors de la demande de verrou de veille. De manière cruciale, le code ajoute un écouteur d'événement pour écouter l'événement "release" qui indique quand le verrou de veille n'est plus actif. Cela peut se produire si l'utilisateur a explicitement libéré le verrou ou si le système l'a récupéré en raison de mesures d'économie d'énergie.

3. Libérer le verrou de veille

Il est crucial de libérer le verrou de veille lorsqu'il n'est plus nécessaire. Ne pas le faire peut vider la batterie de l'appareil et avoir un impact négatif sur l'expérience utilisateur. Pour libérer le verrou de veille, appelez la méthode release() sur l'objet WakeLockSentinel.

            const releaseWakeLock = async () => {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
    console.log('Verrou de veille de l\'écran libéré !');
  }
};

// Appelez cette fonction pour libérer le verrou de veille
releaseWakeLock();

            

              
                Copy
              
            
          

Cette fonction libère en toute sécurité le verrou de veille et définit la variable wakeLock sur null. Il est essentiel de s'assurer que la variable wakeLock est correctement gérée pour éviter les erreurs lors de la libération du verrou.

4. Gérer les événements de libération du verrou de veille

Le système peut libérer le verrou de veille pour diverses raisons, telles que l'inactivité de l'utilisateur ou une batterie faible. Il est important d'écouter l'événement release sur l'objet WakeLockSentinel pour gérer ces situations avec élégance. Cela vous permet de redemander le verrou de veille ou de prendre d'autres mesures appropriées.

            wakeLock.addEventListener('release', () => {
  console.log('Le Screen Wake Lock a été libéré');
  // Tenter de redemander le verrou de veille
  // ou prendre d'autres mesures appropriées
  requestWakeLock(); // Par exemple, redemander le verrou de veille
});

            

              
                Copy
              
            
          

Cet exemple montre comment écouter l'événement release et potentiellement redemander le verrou de veille. La mise en œuvre réelle dépendra des exigences spécifiques de votre application.

Bonnes pratiques et considérations

Bien que l'API Screen Wake Lock soit un outil puissant, il est essentiel de l'utiliser de manière responsable et de tenir compte des bonnes pratiques suivantes :

• Demander des verrous de veille uniquement lorsque c'est nécessaire : Évitez d'acquérir des verrous de veille inutilement, car ils peuvent vider la batterie de l'appareil. Ne demandez un verrou de veille que lorsque la visibilité continue de l'écran est vraiment essentielle pour l'expérience utilisateur.
• Libérer les verrous de veille rapidement : Libérez le verrou de veille dès qu'il n'est plus nécessaire. Cela aide à préserver l'autonomie de la batterie et à éviter une consommation inutile.
• Gérer les événements de libération avec élégance : Soyez prêt à ce que le système libère le verrou de veille de manière inattendue. Écoutez l'événement release et prenez les mesures appropriées, comme redemander le verrou de veille ou en informer l'utilisateur.
• Fournir des contrôles à l'utilisateur : Envisagez de fournir aux utilisateurs des contrôles pour activer ou désactiver la fonctionnalité de verrou de veille. Cela donne aux utilisateurs plus de contrôle sur la consommation d'énergie de leur appareil et leur permet de personnaliser le comportement de l'application. Par exemple, un lecteur multimédia pourrait avoir un interrupteur "Garder l'écran allumé".
• Tenir compte de l'autonomie de la batterie : Soyez conscient de l'impact sur l'autonomie de la batterie. Garder l'écran allumé en permanence peut réduire considérablement l'autonomie, en particulier sur les appareils mobiles. Informez les utilisateurs de l'impact potentiel et offrez des options pour l'atténuer.
• Permission de l'utilisateur : Bien que l'API elle-même ne demande pas directement la permission de l'utilisateur, il est de bonne pratique d'informer l'utilisateur que l'application empêche la mise en veille de l'écran et de lui permettre de désactiver ce comportement.
• Mécanisme de repli : Pour les navigateurs qui ne prennent pas en charge l'API, envisagez de mettre en œuvre un mécanisme de repli. Cela pourrait consister à utiliser JavaScript pour envoyer périodiquement des événements factices à l'écran pour l'empêcher de baisser de luminosité ou de se verrouiller. Cependant, sachez que cette approche peut être moins fiable et plus gourmande en ressources que l'utilisation de l'API Screen Wake Lock.
• Tests : Testez minutieusement votre application sur différents appareils et navigateurs pour vous assurer que l'API Screen Wake Lock fonctionne comme prévu. Portez une attention particulière à la consommation de la batterie et à l'expérience utilisateur.
• Accessibilité : Sachez que garder l'écran toujours allumé peut être problématique pour certains utilisateurs. Fournir des moyens de désactiver le verrou de veille de l'écran rend votre application plus accessible.

Exemples concrets

Voici quelques exemples concrets de la manière dont l'API Screen Wake Lock peut être utilisée dans différentes applications :

• Lecteurs multimédias : Une application de streaming vidéo peut utiliser l'API Screen Wake Lock pour empêcher l'écran de s'assombrir pendant la lecture, offrant une expérience de visionnage fluide.
• Applications de navigation : Une application de navigation peut utiliser l'API pour garder l'écran allumé pendant que l'utilisateur conduit, s'assurant que les directions sont toujours visibles.
• Applications de présentation : Une application de présentation peut utiliser l'API pour empêcher l'écran de s'assombrir pendant une présentation, garantissant que le public peut toujours voir les diapositives.
• Applications de fitness : Une application de fitness qui suit une séance d'entraînement peut garder l'écran allumé afin que les utilisateurs puissent consulter rapidement leurs statistiques sans avoir à déverrouiller leur appareil.
• Applications de recettes : Une application de recettes peut utiliser l'API pour garder l'écran allumé pendant que l'utilisateur suit une recette, empêchant l'écran de s'assombrir pendant que l'utilisateur cuisine.
• Applications de kiosque : Les applications de kiosque bénéficient de cette fonctionnalité. Par exemple, les bornes libre-service dans les aéroports ou les restaurants peuvent utiliser l'API Screen Wake Lock pour s'assurer que l'écran reste actif et réactif aux interactions des utilisateurs.
• Applications de télémédecine : Lors de rendez-vous médicaux virtuels, en particulier ceux nécessitant une observation, l'API Screen Wake Lock peut être utilisée pour garantir que l'écran reste allumé tout au long de la consultation.

Exemple de code : Lecteur multimédia avec Screen Wake Lock

Cet exemple montre comment implémenter l'API Screen Wake Lock dans une application de lecteur multimédia simple.

            
<!DOCTYPE html>
<html>
<head>
  <title>Lecteur multimédia avec Screen Wake Lock</title>
</head>
<body>
  <video id="myVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Votre navigateur ne prend pas en charge la balise vidéo.
  </video>

  <button id="wakeLockBtn">Activer le Screen Wake Lock</button>

  <script>
    const video = document.getElementById('myVideo');
    const wakeLockBtn = document.getElementById('wakeLockBtn');
    let wakeLock = null;

    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Verrou de veille de l\'écran actif !');
        wakeLockBtn.textContent = 'Désactiver le Screen Wake Lock';

        wakeLock.addEventListener('release', () => {
          console.log('Le Screen Wake Lock a été libéré');
          wakeLockBtn.textContent = 'Activer le Screen Wake Lock';
        });

      } catch (err) {
        console.error(`${err.name}, ${err.message}`);
      }
    };

    const releaseWakeLock = async () => {
      if (wakeLock) {
        await wakeLock.release();
        wakeLock = null;
        console.log('Verrou de veille de l\'écran libéré !');
        wakeLockBtn.textContent = 'Activer le Screen Wake Lock';
      }
    };

    wakeLockBtn.addEventListener('click', () => {
      if (wakeLock) {
        releaseWakeLock();
      } else {
        requestWakeLock();
      }
    });

    // Optionnel : Demander automatiquement le verrou de veille lorsque la vidéo démarre
    video.addEventListener('play', () => {
        if(!wakeLock){
            requestWakeLock();
        }
    });

  </script>
</body>
</html>

            

              
                Copy
              
            
          

Ce code crée un lecteur multimédia simple avec un bouton pour activer ou désactiver le verrou de veille de l'écran. Lorsque le bouton est cliqué, le code demande soit un nouveau verrou de veille, soit libère celui existant. Le texte du bouton est mis à jour pour refléter l'état actuel du verrou de veille. Cet exemple inclut également un écouteur d'événement optionnel qui demande automatiquement le verrou de veille lorsque la lecture de la vidéo commence. Note : Remplacez your-video.mp4 par le chemin réel de votre fichier vidéo.

Considérations de sécurité

L'API Screen Wake Lock est conçue en gardant la sécurité à l'esprit. Les navigateurs mettent en œuvre diverses mesures de sécurité pour empêcher l'abus de l'API. Par exemple, les navigateurs peuvent limiter la durée pendant laquelle un verrou de veille peut être maintenu ou exiger une interaction de l'utilisateur avant d'accorder un verrou de veille. Suivez toujours les bonnes pratiques décrites plus haut dans cet article pour vous assurer que vous utilisez l'API de manière responsable et éthique.

Alternatives à l'API Screen Wake Lock

Avant l'API Screen Wake Lock, les développeurs utilisaient souvent des "bidouilles" pour empêcher la mise en veille de l'écran. Ces méthodes sont généralement peu fiables et non recommandées.

• Élément vidéo sans opération : Insérer un minuscule élément vidéo silencieux dans la page et le lire en continu. Cela trompe le système en lui faisant croire qu'un média est en cours de lecture, empêchant ainsi la mise en veille. C'est extrêmement gourmand en ressources.
• Requêtes AJAX factices : Envoyer périodiquement des requêtes AJAX au serveur pour maintenir l'appareil "actif". C'est un piètre substitut, car il est gourmand en réseau et peu fiable.

Ces méthodes ne sont pas recommandées, car elles sont peu fiables et peuvent avoir un impact négatif sur les performances et l'autonomie de la batterie. L'API Screen Wake Lock est la solution recommandée pour empêcher la mise en veille de l'écran dans les applications web.

Conclusion

L'API Screen Wake Lock est un outil précieux pour les développeurs web qui souhaitent créer des expériences utilisateur fluides et engageantes. En empêchant les appareils de baisser la luminosité ou de verrouiller l'écran, vous pouvez vous assurer que vos applications restent visibles et réactives, même pendant de longues périodes d'inactivité. N'oubliez pas d'utiliser l'API de manière responsable et de suivre les bonnes pratiques décrites dans cet article pour éviter de vider la batterie de l'appareil et d'impacter négativement l'expérience utilisateur. À mesure que l'API sera plus largement adoptée, elle deviendra sans aucun doute un élément essentiel de la boîte à outils du développement web. Adoptez la puissance de l'API Screen Wake Lock pour sublimer vos applications web et offrir une expérience plus agréable à vos utilisateurs du monde entier.